<template>
    <div class="f-c">
        <el-dropdown v-if="filters.length > 1" @command="setCommand" popper-class="dropdown__item--center">
            <el-button type="primary" class="radius-r-0">
                <span :style="{ width: btnTextWidth }">{{ filtersItem.label }}</span>
                <el-icon>
                    <ArrowDown/>
                </el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="row in filters" :command="row.label">{{ row.label }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <el-button v-else type="primary" radius-r-0>{{ filtersItem.label }}</el-button>

        <div class="f-c" :style="{ width: width }">
            <el-date-picker
                class="radius-l-0"
                v-model="datePicker"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                :editable="false"
                @change="changeDatePicker"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { computed, ref, watch } from "vue";
    import { ArrowDown } from "@element-plus/icons-vue";
    import { FilterTimesRow, getFilterTimeParams, getFilterTimeValue } from "@/components/globalUtils/GFilterTime";

    const props = defineProps({
        value: {
            type: Object,
            default: () => {
                return {}
            }
        },
        type: {
            type: String,
            default: '',
        },
        width: {
            type: String,
            default: '215px',
        },
    })

    let datePicker = ref<string[]>([]);
    let filters = ref<FilterTimesRow[]>(getFilterTimeValue(props.type as string));
    let filterParams: { [props: string]: string } = getFilterTimeParams(props.type as string);
    let filtersItem = ref<FilterTimesRow>({
        label: '',
        value: [],
    });

    let maxLabelLength: number = 0;
    for (let row of filters.value) {
        if (row.label.length > maxLabelLength) {
            maxLabelLength = row.label.length;
        }
    }
    const btnTextWidth = computed(() => {
        return `${maxLabelLength * 12 + 6}px`;
    })

    const setCommand = (name: string) => {
        if (filtersItem.value.label === name) return;
        getFilters(name);
        if (datePicker.value?.length) {
            datePicker.value = [];
            resetFilterParams();
            onChange();
        }
    }
    const getFilters = (name: string) => {
        filtersItem.value = filters.value.filter((row: FilterTimesRow) => row.label === name)[0];
    }
    const resetFilterParams = () => {
        for (let key in filterParams) {
            filterParams[key] = '';
        }
    }
    const changeDatePicker = (date: string[]) => {
        if (date && date.length) {
            date[0] = `${date[0]} 00:00:00`;
            date[1] = `${date[1]} 23:59:59`;
            for (let i = 0; i < date.length; i++) {
                filterParams[filtersItem.value.value[i]] = date[i];
            }
        } else {
            resetFilterParams();
        }
        onChange();
    }

    const emit = defineEmits(['change']);
    const onChange = () => {
        emit('change', filterParams, filtersItem.value);
    }

    watch(() => props.value, (newValue: { [props: string]: string }) => {
        datePicker.value = [];
        resetFilterParams();
        for (let row of filters.value) {
            for (let key of row.value) {
                if (newValue[key]) {
                    filtersItem.value = row;
                    datePicker.value.push(newValue[key].slice(0, 10));
                }
            }
        }
        if (filters.value.length && !datePicker.value.length) {
            getFilters(filters.value[0].label);
        }
    }, {
        immediate: true,
        deep: true
    })
</script>

<style scoped lang="scss">
    ::v-deep(.el-date-editor .el-range__icon) {
        display: none;
    }
</style>